import React, {useEffect, useState} from "react";
import {flowRecord} from "@/api/flowable/taskFinish";
import {Descriptions, DescriptionsProps} from "antd";



interface MyComponentProps {
    processDetail: {
        deployId?:number,
        procInsId?:number
    };
}

const processRecordsView: React.FC<MyComponentProps> = (props) => {

    const {processDetail} = props;

    const items: DescriptionsProps['items'] = [
        {
            label: 'UserName',
            span: 'filled',
            children: 'Zhou Maomao',
        },
        {
            label: 'Live',
            span: 'filled',
            children: 'Hangzhou, Zhejiang',
        },

        {
            label: 'Address',
            span: 'filled', // span will be 3 and warning for span is not align to the end
            children: 'No. ',
        },
    ];
    const [flowList, setFlowList] = useState([]);
    useEffect(() => {
        getList()
    }, []);
    const getList = () => {
        flowRecord(processDetail.procInsId, processDetail.deployId).then((res:any) => {
            if (res.code == 200) {
                setFlowList(res.data.flowList);
            }
        });
    }

    return (
        <div>
            {flowList.map(item =>
                (<Descriptions bordered title={item.taskName} key={item.taskId}>
                    {item.assigneeName && <Descriptions.Item label="办理人"
                                                             span={24}>{item.assigneeName}{item.deptName}</Descriptions.Item>}
                    {item.candidate &&
                        <Descriptions.Item label="候选办理" span={24}>{item.candidate}</Descriptions.Item>}
                    {item.createTime &&
                        <Descriptions.Item label="接收时间" span={24}> {item.createTime}</Descriptions.Item>}
                    {item.finishTime &&
                        <Descriptions.Item label="处理时间" span={24}>{item.finishTime}</Descriptions.Item>}
                    {item.duration &&
                        <Descriptions.Item label="办理耗时" span={24}>{item.finishTime?"已办理":"未办理"}{item.duration}</Descriptions.Item>}
                    {item.comment?.comment &&
                        <Descriptions.Item label="处理意见" span={24}>{item.comment?.comment}</Descriptions.Item>}
                </Descriptions>)
            )}
        </div>
    )
}
export default processRecordsView